<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        *{
            list-style: none;
        }
        #body {
            position: relative;
            width: 35%;
            height: 569px;
            border-radius: 20px;
            overflow: hidden;
            background-color: rgb(192, 3, 3);
            z-index: 3;
        }

        #text_wish {
            overflow: hidden;
            margin-right: 10px;
            margin-left: 10px;
        }

        h2 {
            margin-right: 10px;
            margin-left: 10px;
            margin-top: 30px;
            height: 40px;
            color: rgb(234, 212, 183)
        }

        #wish_body {
            margin-left: 2.2%;
            width: 95%;
            height: 600px;
            /*position: absolute;*/
            /*border: 2px white solid;*/
            margin-top: 10px;
        }

        #wishMessage {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            background-color: rgb(192, 3, 3);
            z-index: 1;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        li {
            width: 100%;
            height: 70px;
            margin-top:10px;
            margin-right: 50%;
            /*margin: 10px;*/
            background-color: #ffffff;
            color: #827676;
            /*text-align: center;*/
            font-size: 20px;
            transition: all 0.3s ease-out;
        }

        #body_foot {
            position: absolute;
            width: 25%;
            height: 60px;
            left: 30%;
            border-radius: 2px;
            /*margin-right: 25%;*/
            padding-left: 0.5%;
            bottom: 20px;
            z-index: 2;
            background-color:  rgb(192, 3, 3);
            /*border: white 2px solid;*/
        }
        {
            width: 100%;
        }

        h1 {
            width: 80%;
            height: 80%;
            margin-top: 1%;
            /*border-radius: 2px;*/
            color: rgb(234, 212, 183);
        }
    </style>
</head>
<body>
<div>
    <div id="app">
        <div id="body">
            <!--头部-->
            <div id="text_wish">
                <h2>祝福母校
                    <div style="float: right">人参与</div>
                    <div id="people" style="float: right">4488</div>
                    <div style="float: right">已有</div>
                </h2>
            </div>
            <div id="wish_body">
                <!--祝福语显示-->
                <div id="wishMessage">
                    <ul id="ul">
                        <li v-for="item in items">
                            <span>{{"@"+item.campus}}</span>
                            <span>{{" "+item.nickname+": "}}</span>
                            {{item.article+"  "}}
                            <span>{{item.altTime}}</span>
                        </li>
                    </ul>
                </div>
                <!-- 按钮 -->
                <div id="body_foot">
                    <el-button type="text" @click="dialogMessageVisible = true"><h1>我要送祝福</h1></el-button>
                </div>
            </div>
        </div>


        <!-- 祝福语模态框 -->
        <el-dialog title="送祝福" :visible.sync="dialogMessageVisible">
            <el-form :model="message">
                <el-form-item label="祝福语" :label-width="MessageLabelWidth">
                    <el-input v-model="message.article" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogMessageVisible = false">取消</el-button>
                <el-button type="primary" @click="add()">提交</el-button>
            </div>
        </el-dialog>


    </div>
</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    const ul = document.getElementById('ul')
    let timerId
    let v = new Vue({
        el: '#app',
        data() {
            return {
                dialogTableVisible: false,
                dialogMessageVisible: false,
                message: {
                    campus: "北京通州",
                    nickname: "@天音",
                    article: "朝花夕拾",
                    altTime:""
                },
                MessageLabelWidth: '120px',
                items:[]
            };
        },
        methods: {
            add() {
                axios.post("/add", v.message).then(function (response) {
                    location.href = "/index2.html";
                })
            }
        },
        created:function () {
            axios.get("/select").then(function (response) {
                v.items= response.data;
            })
            if(timerId) return
            timerId = setInterval(() => {
                const firstLi = document.querySelector('#ul li:first-child')
                ul.style.transition = 'all 0.5s ease-out'
                firstLi.style.opacity = 0
                ul.style.top = -110 + 'px'
                setTimeout(() => {
                    firstLi.removeAttribute('style')
                    ul.appendChild(firstLi)
                    ul.style.transition = ''
                    ul.style.top = 0
                }, 500)
            }, 2000)
        }
    })
</script>
</html>